<template>
  <div class="scroll-list-container">
    <div class="list-header">
      <span class="content">预警内容</span>
      <span class="status">状态</span>
      <span class="time">发生时间</span>
    </div>
    <div id="parent" class="parent">
      <div id="child1" class="child">
        <div class="list-table" v-for="(item, i) in list" :key="i">
          <span class="content">{{item.name}}</span>
          <span class="status">已处理</span>
          <span class="time">{{item.time}}</span>
        </div>
      </div>
      <div id="child2" class="child"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "scrollList",
  data(){
     return {
       list:[
         {name:'低温预警', time:'2024-12-18'},
         {name:'低温预警', time:'2024-11-21'},
         {name:'低温预警', time:'2024-11-24'},
         {name:'低温预警', time:'2024-11-27'},
       ]
     }
  },
  mounted () {
    var parent = document.getElementById('parent')
    var child1 = document.getElementById('child1')
    var child2 = document.getElementById('child2')
    child2.innerHTML = child1.innerHTML
    // setInterval(function () {
    //   if (parent.scrollTop >= child1.scrollHeight) {
    //     parent.scrollTop = 0
    //   } else {
    //     parent.scrollTop++
    //   }
    // }, 40)
      if (parent.scrollTop >= child1.scrollHeight) {
        parent.scrollTop = 0
      } else {
        parent.scrollTop++
      }
  }
}
</script>

<style lang="scss" scoped>
.scroll-list-container {
  color: rgba(255,255,255,.7);
  font-size: 14px;
}
.parent {
  width: 100%;
  height: 112px;
  margin: 0 auto;
  overflow-y: scroll;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
.child li {
  height: 28px;
  margin: 2px 0;
}
.list-header {
  height: 30px;
  padding-left: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(242, 242, 242,.2);
  .content {
    width: 40%;
    margin-top: 0;
  }
  .status {
    width: 25%;
  }
  .tiem {
    width: 35%;
  }
}
.list-table {

  padding-left: 8px;
  height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  // background-color: rgba(242, 242, 242,.2);
  background: #1e2a21;
  &:nth-child(even) {
    background-color: rgba(242, 242, 242,.2);
  }
  .content {
    width: 40%;
    margin-top: 0;
  }
  .status {
    width: 25%;
    color: #00B23C ;
  }
  .tiem {
    width: 35%;
  }
}
/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none;
}
</style>
